<mat-card>
    <mat-card-header>
        <div style="display:flex;width:100%;justify-content: space-between;">
            <mat-card-title>
                <button (click)="changeVideoCount()"
                 mat-icon-button   type="button" style="z-index: 999;">
                    <mat-icon class="material-icons">{{videocount==4?'border_all':'crop_din'}}</mat-icon>
                </button>
            </mat-card-title>
            <button (click)="closevideo()" mat-icon-button mat-dialog-close type="button" style="z-index: 999;">
                <mat-icon class="material-icons">close</mat-icon>
            </button>
        </div>

    </mat-card-header>
    <mat-card-content>
        <div>
            <button *ngFor="let vlist of _videosList; let i = index"
             mat-button mat-icon-button 
             [color]="activeindex==i?'primary':''"
              (click)="playVideo(i)">
               {{i+1}}
            </button>
        </div>
        <div class="videosholder" [ngClass]="videocount==1?'big':''">
            <div *ngFor="let video of videosList" class="videoholder"> 
                <video #video style="width: calc(100% - 20px);aspect-ratio: 446/251;position: absolute;"
                    [ngStyle]="{display: video?.__zone_symbol__value?.done?'block':'none'}" 
                    class="vjs-tech" controls
                    tabindex="-1" muted="muted" autoplay=""></video>
                <div [ngStyle]="{display: video?.__zone_symbol__value?.done?'none':'flex'}"
                    class="acud-loading-loading-context acud-loading-bottom acud-loading-zIndex">
                    <svg class="acud-loading-default acud-loading-begin" width="1em" height="1em"
                        viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                        <g fill="inherit">
                            <circle class="circle1" cx="511.1" cy="108.6" r="102.6"></circle>
                            <circle class="circle2" cx="862.1" cy="309.6" r="102.6"></circle>
                            <circle class="circle3" cx="862.1" cy="712.4" r="102.6"></circle>
                            <circle class="circle4" cx="511.1" cy="917.8" r="102.6"></circle>
                            <circle class="circle5" cx="159.7" cy="712.4" r="102.6"></circle>
                            <circle class="circle6" cx="159.7" cy="309.6" r="102.6"></circle>
                        </g>
                        <polygon class="frame"
                            points="511.1,108.6 861.8,311.2 862.1,712.4 511.1,917.8 159.7,712.4 146,309.6" fill="none"
                            stroke-width="50" stroke-miterlimit="10" stroke="inherit"></polygon>
                    </svg><span class="acud-loading-tip"></span>
                </div>

            </div>

        </div>


    </mat-card-content>
</mat-card>